<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="productTable">
        <tr>
            <td>01</td>
            <td>牛仔外套</td>
            <td>99元</td>
            <td>1</td>
            <td>99元</td>
        </tr>
        <tr>
            <td>02</td>
            <td>帽子</td>
            <td>25元</td>
            <td>2</td>
            <td>50元</td>
        </tr>
        <tr>
            <td>03</td>
            <td>双肩包</td>
            <td>100元</td>
            <td>1</td>
            <td>100元</td>
        </tr>
    </table>
    <script>
    const table = document.getElementById('productTable');
    const rows = table.getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        rows[i].onmouseover = function () {
            this.style.backgroundColor = 'lightblue'; 
        };
        rows[i].onmouseout = function () {
            this.style.backgroundColor = ''; 
        };
    }
    </script>
</body>
</html>